<!-- 分类 -->
<template>
	<view class="category-box">
		<!-- 搜索框 -->
		<view class="sskx">
			<view class="ssk">
				<input @change="onSearch" v-model="searchVal" type="text" value="" placeholder="请输入关键词搜索" />
				<view>
					<u-icon @click="onSearch"  color="#ffffff" size="29" name="search"></u-icon>
				</view>
			</view>
		</view>		
		<!-- 三级分类 -->
		<three-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 4"></three-catgory>
		<!-- 二级分类 -->
		<two-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 3"></two-catgory>
		<!-- 一级分类-->
		<one-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 2"></one-catgory>
		<!--直接购买，点餐 -->
		<takeout-catgory :categoryStyleId="categoryStyleId" v-if="categoryType === 1"></takeout-catgory>
		<!-- 登录提示 -->
		<shopro-auth-modal v-if="authType"></shopro-auth-modal>
		<!-- <shopro-tabbar></shopro-tabbar> -->
	</view>
</template>

<script>
import takeoutCatgory from './category/takeout-catgory.vue';
import threeCatgory from './category/three-catgory.vue';
import twoCatgory from './category/two-catgory.vue';
import oneCatgory from './category/one-catgory.vue';
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
	components: {
		takeoutCatgory,
		threeCatgory,
		twoCatgory,
		oneCatgory
	},
	data() {
		return {
			categoryType: 0, //1:快速购买,2:一级分类，3:二级分类，4:三级分类
			categoryStyleId: 0 ,//分类Id
			searchVal:""//搜索内容
		};
	},
	computed: {
		...mapGetters(['authType','isLogin'])
	},
	onLoad() {
		this.getCategory();
	},
	onShow() {
		console.log('isLogin2222',this.isLogin)
		if(this.isLogin){
			this.getCartList()
		}
		
	},
	methods: {
		...mapActions(['appInit', 'getTemplate', 'getCartList']),
		// 跳转搜索
		onSearch(){
			let _this=this
			// uni.removeStorageSync('commodityId')
			// uni.setStorageSync('commodityId',_this.searchVal)
			// uni.navigateTo({
			// 	url:"../product/product-list?keywords="+ _this.searchVal
			// })
			this.$Router.push({
				path: '/pages/product/product-list',
				query: {keywords:_this.searchVal}
			});
		},
		/**
		 * 获取分类数据
		 *  type4:三级分类， type3:二级分类 ,type2:一级分类,type1:快速购买
		 */
		getCategory() {
			this.$http('category.info', {
				id: this.$Route.query.id ? this.$Route.query.id : 0
			}).then(res => {
				if (res.code === 1) {
					if (res.data?.type) {
						this.categoryType = Number(res.data.type);
						this.categoryStyleId = Number(res.data.id);
						uni.setNavigationBarTitle({
							title: res.data?.name
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.category-box {
	height: 100%;
	flex: 1;
	overflow: hidden;
}
.sskx{
		padding: 20rpx 0;
	}
	.ssk{
		width: 600rpx;
		height: 60rpx;
		background: #FFFFFF;
		border: 1rpx solid #D6D7DC;
		border-radius: 30rpx;
		margin: 0 auto ;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.ssk>view{
		width: 100rpx;
		height: 100%;
		background: #FF9A33;
		border: 1rpx solid #D6D7DC;
		border-radius: 0rpx 30rpx 30rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.ssk>view /deep/ text{
		margin: 0 auto;
	}
	.ssk>input{
		width:calc(80% - 40rpx);
		padding: 0 20rpx;
		border: none;
		outline: none;
		height: 100%;
	}
	
	.line-active{
		width: 200rpx !important;
	}
</style>
